var angular = require('angular');
var coreModule = require('../core_module');
var $ = require('jquery');

import 'antd/dist/antd.css'
import React from 'react'
import ReactDOM from 'react-dom'
import Modal from '../reactmodules/modal/modal.jsx';

coreModule.service('loadReactModuleSrv', function($compile) {
  this.create = function(reactClass, scope) {
    var directiveElem = angular.element('<react-component name="HelloComponent" props="person" watch-depth="reference"/>');

    // $('body').append(directiveElem)

    $compile(directiveElem)(scope);

  }
})

coreModule.directive('reactComponent', function() {
  return {
    restrict: 'E',
    scope: {
      data: '='
    },
    link: function(scope, el, attrs) {
      scope.$watchCollection('data', function(newValue, oldValue){
          ReactDOM.render(
              <Modal />,
              el[0]
          );
      })
    }
  }
})